<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为 TinyMCE 编辑器添加 Zen-Coding 功能</title>
<link rel="stylesheet" href="../css/reset.css" type="text/css" />
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>

<body onload="prettyPrint();">
<h1>为 TinyMCE 编辑器添加 Zen-Coding 功能</h1>
<hr />
<h3>修改相关文件</h3>
<p>找到相关文件tinymce/jscripts/tiny_mce/themes/advanced/source_editor.htm</p>
<pre class="prettyprint linenums">
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
	&lt;title&gt;{#advanced_dlg.code_title}&lt;/title&gt;
	&lt;script type="text/javascript" src="../../tiny_mce_popup.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="js/source_editor.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onresize="resizeInputs();" style="display:none; overflow:hidden;"&gt;
	&lt;form name="source" onsubmit="saveContent();return false;" action="#"&gt;
		&lt;div style="float: left" class="title"&gt;&lt;label for="htmlSource"&gt;{#advanced_dlg.code_title}&lt;/label&gt;&lt;/div&gt;

		&lt;div id="wrapline" style="float: right"&gt;
			&lt;input type="checkbox" name="wraped" id="wraped" onclick="toggleWordWrap(this);" class="wordWrapCode" /&gt;&lt;label for="wraped"&gt;{#advanced_dlg.code_wordwrap}&lt;/label&gt;
		&lt;/div&gt;

		&lt;br style="clear: both" /&gt;

		&lt;textarea name="htmlSource" id="htmlSource" rows="15" cols="100" style="width: 100%; height: 100%; font-family: 'Courier New',Courier,monospace; font-size: 12px;" dir="ltr" wrap="off" class="mceFocus"&gt;&lt;/textarea&gt;

		&lt;div class="mceActionPanel"&gt;
			&lt;input type="submit" role="button" name="insert" value="{#update}" id="insert" /&gt;
			&lt;input type="button" role="button" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" id="cancel" /&gt;
		&lt;/div&gt;
	&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

</pre>
<p>只需在&lt;head&gt;&lt;/head&gt;区域引入Zen-Coding的js文件即可：</p>
<pre class="prettyprint linenums">
&lt;head&gt;
	&lt;title&gt;{#advanced_dlg.code_title}&lt;/title&gt;
	&lt;script type="text/javascript" src="../../tiny_mce_popup.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="js/source_editor.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="js/zen_textarea.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

</pre>
<p>别忘了把zen_textarea.min.js添加到合适的位置.</p>
<h3>Textarea 的 Zen-Coding 快捷键:</h3>
<p><img src="./img/zen-coding_textarea.png" alt="Textarea 使用 Zen-Coding" /></p>
</body>
</html>
